<style type="text/css">
.select_tr{}
.select_tr:hover{cursor:pointer;color:#FFFFFF; background-color:#0099FF;}

.row0{
cursor:pointer;
color:
}

.row0:hover
{
cursor:pointer;
background-color:lavender;
}

.row1{
	cursor:pointer;
	
}
.row1:hover{
cursor:pointer;
	background-color:lavender;
}
</style>
<script language="JavaScript" src="{URL_JS}tableaddcolumn.js" type="text/javascript"></script>
<script type="text/javascript">
function explode( delimiter, string, limit ) {
    var emptyArray = { 0: '' };
    
    // third argument is not required
    if ( arguments.length < 2
        || typeof arguments[0] == 'undefined'
        || typeof arguments[1] == 'undefined' )
    {
        return null;
    }
 
    if ( delimiter === ''
        || delimiter === false
        || delimiter === null )
    {
        return false;
    }
 
    if ( typeof delimiter == 'function'
        || typeof delimiter == 'object'
        || typeof string == 'function'
        || typeof string == 'object' )
    {
        return emptyArray;
    }
 
    if ( delimiter === true ) {
        delimiter = '1';
    }
    
    if (!limit) {
        return string.toString().split(delimiter.toString());
    } else {
        // support for limit argument
        var splitted = string.toString().split(delimiter.toString());
        var partA = splitted.splice(0, limit - 1);
        var partB = splitted.join(delimiter.toString());
        partA.push(partB);
        return partA;
    }
}// }}}

var old_id=0;
var arr_list_cat=new Array;
var pre = new Array;
var pre_id;
var arr_old_id=new Array;
var yahoo_id;
var orgColor;
var orgBack;
var Color="white";
var Back="#0099FF"
//ID:div_id to remove
//CAT ID =category id
//RUN ID =row id in div
function discardElement(element) {
         var garbageBin = document.getElementById('IELeakGarbageBin');
         if (!garbageBin) {
                 garbageBin = document.createElement('DIV');
                 garbageBin.id = 'IELeakGarbageBin';
                 garbageBin.style.display = 'none';
                 document.body.appendChild(garbageBin);
         }
         // move the element to the garbage bin
         garbageBin.appendChild(element);
         garbageBin.innerHTML = '';
}

function HighLightTR(value)
{
var arr=explode(',',value);
id=arr[0];
cat_id=arr[1];
run_id=arr[2];
cat_yahoo_id=arr[3];

yahoo_id=cat_yahoo_id;
document.getElementById('selected_level').value=id;
var parent=document.getElementById("root");
if(id==0)
{
	if(arr_list_cat=='' || arr_list_cat==null)
	{
		var next_id=parseInt(id)+1;
		var child_div=document.getElementById(next_id);
		if(child_div != null){
		//parent.removeChild(child_div);
			discardElement(child_div);
			var myTD=document.getElementById('listTable').getElementsByTagName('tr')[0].getElementsByTagName('td')[next_id];
			myTD.parentNode.removeChild(myTD);
		}
		
	}
	
	else
	{
		var arr_lenght=arr_list_cat.length;
	
		for (var i=1;i<=arr_lenght;i++) 
		{
			var next_id=parseInt(i);
			var child_div=document.getElementById(next_id);
			
			if(child_div != null){
				discardElement(child_div);	
				var myTD=document.getElementById('listTable').getElementsByTagName('tr')[0].getElementsByTagName('td')[next_id];
				myTD.parentNode.removeChild(myTD);
			}
			
		}
	}
	
	//
	/*var obj=document.getElementById(run_id);
	var obj_1=document.getElementById(pre[0]);
	if(obj_1!=null)
	{
		obj_1.style.color=orgColor;
		obj_1.style.backgroundColor=orgBack;

	}
	orgColor=obj.style.color;
	orgBack=obj.style.backgroundColor;
	
	obj.style.color=Color;
	obj.style.backgroundColor=Back;
	
	pre[0]=run_id;*/
	
	//
	
}
//*******************************************************************************************/
else
{			
			var obj=document.getElementById(run_id);
			
			//REMOVE DIV
			var arr_lenght=arr_list_cat.length;
			for (var i=1; i<=arr_lenght; i++) 
			{
				var next_id=parseInt(id)+parseInt(i);
				var child_div=document.getElementById(next_id);
				if(child_div != null){
				//parent.removeChild(child_div);
					discardElement(child_div);
					//var myTD=document.getElementById('listTable').getElementsByTagName('tr')[0].getElementsByTagName('td')[next_id];
					//myTD.parentNode.removeChild(myTD);
				}
			}
			
			//HIGHLIGHT
			
		/*	orgColor=obj.style.color;
			orgBack=obj.style.backgroundColor;
	
			obj.style.color=Color;
			obj.style.backgroundColor=Back;
			
			var arr=explode('_',run_id);
			var id =arr[1];
			var level =arr[0];
			if(pre[level]==level)
			{
				
				pre[level]=level;
				pre_id=arr_old_id[level];
			}
			
			var pre_id_selected=pre[level]+"_"+pre_id;
			var obj_1=document.getElementById(pre_id_selected);
			if(obj_1!=null)
			{
				obj_1.style.color=orgColor;
				obj_1.style.backgroundColor=orgBack;
			}
			pre[level]=level;
			pre_id=id;
			arr_old_id[level]=id;*/
}

doListChild(cat_id);
old_id=id;
/////////////////////////////////////////////

//////////////////////////////////
}

function doListParent()
{
		display("Loading...","ajax_loading2");
		oXMLHttp = checkXMLHTTP();
		var setRequest = typeof(oXMLHttp.setRequestHeader);
		if ( oXMLHttp && setRequest!="undefined" )
		{
			var myQuery = "";	
			orderPost( oXMLHttp, "{URL_SITE}admin/?sMod=category_choose&sAction=list_parent_category", myQuery, HTTPshowListParent, true );
		}
}
function HTTPshowListParent()
{
   if ( typeof(oXMLHttp)==='undefined' )
       return;
    // Return status of XMLHttp object
    if ( oXMLHttp.readyState==4 )
    {
        // if oXMLHttp.status is OK
        if ( oXMLHttp.status==200 )
        {
			sRes = ((oXMLHttp.responseText));
			oJson = sRes.parseJSON(); 			
			 if ( typeof( oJson ) === 'object' )
                {
						display("&nbsp;","ajax_loading2");
						var result=oJson['BODY']['RES'];
						if(result!='')
						{
								var now_html=document.getElementById("root").innerHTML;
								var test=now_html.substr(0,now_html.length-21)+ '<TD width=180 id="0"> ' +result + '</TD>' +now_html.substr(now_html.length-21,21);
								display(test,'root');
								document.getElementById('selected_level').value=0;
								
						}
				}	
		}
        if ( oXMLHttp.status==404)
        {
            alert("Page not found");
        }
    }

}

function doListChild(id)
{
		if(id=='')
		return;
		display("Loading...","ajax_loading2");
		oXMLHttp = checkXMLHTTP();
		var setRequest = typeof(oXMLHttp.setRequestHeader);
		var cur_level=document.getElementById('selected_level').value;
		if ( oXMLHttp && setRequest!="undefined" )
		{
			var myQuery = "&parent_id="+id+"&current_level="+cur_level;	
			orderPost( oXMLHttp, "{URL_SITE}admin/?sMod=category_choose&sAction=list_child_category", myQuery, HTTPshowListChild, true );
		}
}
function HTTPshowListChild()
{
   if ( typeof(oXMLHttp)==='undefined' )
       return;
    // Return status of XMLHttp object
    if ( oXMLHttp.readyState==4 )
    {
        // if oXMLHttp.status is OK
        if ( oXMLHttp.status==200 )
        {
			sRes = ((oXMLHttp.responseText));
			
			oJson = sRes.parseJSON(); 			
			 if ( typeof( oJson ) === 'object' )
                {
						//var now_id=click_one++;
						//addColumn('list_cat',now_id);
						display("&nbsp;","ajax_loading2");
						var result=oJson['BODY']['RES'][0]; //RESULT TEXT
						var div_id=oJson['BODY']['RES'][1];	//RESULT ID
						var txt_yahoo_id=document.getElementById('yahoo_id');
						
						if(result!='')
						{
								
								//var now_html=document.getElementById("root").innerHTML;
								//var test=now_html+result;
								//display(test,"root");
								
								var obj_div=document.getElementById(div_id);
								//IF DIV IS NOT EXITS,CREATE IT
								if(obj_div==null)
								{
									var div = document.createElement('div');
									div.setAttribute('name', 'list_cat');
									div.setAttribute('id',div_id);				
									var text=document.getElementById("root").innerHTML;
									document.getElementById("root").innerHTML=text.substr(0,text.length-21)+ '<TD width=180 id="'+div_id+'"><DIV id='+div_id+' name="list_cat"></DIV></TD>' + '</TR></TBODY></TABLE>';
									
									//document.getElementById("root").appendChild(div);
																		
									//document.getElementById("root").innerHTML+='</TD></TR></TBODY></TABLE>';
									display(result,div_id);
									
								}
								else
								{
									
									display(result,div_id);
								}
								//arr_list_cat=document.getElementsByName('list_cat[]');
								arr_list_cat=getElementsByName_iefix('div','list_cat');
								txt_yahoo_id.value='';
						}
						else
						{
							txt_yahoo_id.value=yahoo_id;
						}
				}	
		}
        if ( oXMLHttp.status==404)
        {
            alert("Page not found");
        }
    }

}
function check_form()
{
	var frm	=	document.getElementById('frm_cat_choose');
	var cat_id	= document.getElementById('yahoo_id').value;

	if(cat_id=='')
	{
		alert("{CATEGORY.select_category}");
		return false;
	}
	else
	{
		frm.submit();
	}
}
function getElementsByName_iefix(tag, name) {
     
     var elem = document.getElementsByTagName(tag);
     var arr = new Array();
     for(i = 0,iarr = 0; i < elem.length; i++) {
          att = elem[i].getAttribute("name");
          if(att == name) {
               arr[iarr] = elem[i];
               iarr++;
          }
     }
     return arr;
}
</script>


<style>
.scrollBar{
	overflow:auto; 
	max-height:277px;
	max-width:90%;
	width:90%;
	line-height:277px;
	position:absolute;
	float:left;
	right:auto;
}
</style>
<form name="frmUpdate" id="frm_cat_choose" action="" method="post" enctype="multipart/form-data">
<input type="hidden" name="sAction" value="do_generate_pro_id" /> 
<input type="hidden" id="selected_level" value="0"/>
<input type="hidden" id="yahoo_id" name="yahoo_id"/>
</form>
	<table class="adminform" border="1" width="100%">
  <tr>
    <th>&nbsp;<span class="ajax_loading" id="ajax_loading2">&nbsp;</span></th>
   </tr>
		<tr>
			<td height="280">
			<div id="root" class="scrollBar">
			<table border="0" cellspacing="0" cellpadding="0" style="float:left" id="listTable">
			  <tr>
				<!-- BEGIN:ResultCat -->
						<div id="{row_id}" name="list_cat" style="float:left; margin-left:10px;max-height:260px;width:180px;background-color:#F5F5F5">
						 <select multiple="multiple" style="height:260px; width:180px; font-size:12px;" onchange="javascript:HighLightTR(this.value)" id="{RowCat.num_row}" >
							 <!-- BEGIN:RowCat -->
								<option value="{RowCat.row_id},{RowCat.product_category_id},'{RowCat.num_row}',{RowCat.product_category_yahoo_id}" style="color:{RowCat.parent_img}" >{RowCat.product_category_name}-{RowCat.product_category_id}</option>
							 <!-- END:RowCat -->
							  </select>
						</div>
				 <!-- END:ResultCat -->
			   </tr></table>

			   </div>
			 </td>
   		</tr>
  <tr>
    <td><div id="cat_status" style="margin-left:10px;"></div></td>
  </tr>
</table>



<script type="text/javascript">
doListParent();
</script>
